<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>食用菌品种维护</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../../style/wangeditor.css" />
    <link rel="stylesheet" href="../../../../style/index.css" />
    <style>
      .el-descriptions-item__label {
        width: 300px;
      }

      .upload_file.none .el-upload {
        display: none;
      }

      /* 确保必填项星号显示并设置为红色 */
      .el-form-item.is-required:not(.is-no-asterisk)
        .el-form-item__label::before {
        content: "*";
        color: red;
        margin-right: 4px;
        display: inline-block;
      }

      /* 确保星号不影响布局 */
      .el-form-item__label {
        display: flex;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak class="minWidth">
      <yl-page-header content="食用菌品种"></yl-page-header>
      <el-form
        :model="form"
        :rules="rules"
        ref="contract"
        inline-message="true"
        style="width: 100%"
      >
        <div class="table_titel">
          <div class="titel">食用菌品种</div>
        </div>
        <div class="operation">
          <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="食用菌品种">
              <el-form-item prop="VarietyName">
                <el-input
                  v-model.trim="form.VarietyName"
                  placeholder="请输入食用菌品种"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="品种图片" prop="file">
              <el-form-item
                prop="file"
                :rules="{ required: true, message: '请上传品种图片', trigger: 'change' }"
              >
                <el-upload
                  :limit="1"
                  :file-list="fmfileList"
                  :class="['upload_file', {'none': fmfileList?.length }]"
                  multiple
                  list-type="picture-card"
                  :before-upload="handleBeforeUpload"
                  :on-change="chandleChange"
                  :on-remove="phandleRemove"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
          <div class="table_titel">
            <div class="titel">等级</div>
            <div class="operation" style="float: right">
              <el-button type="primary" size="small" @click="add_form2"
                >添加</el-button
              >
            </div>
          </div>
          <el-descriptions
            :column="1"
            border
            size="small"
            style="margin-bottom: 10px"
            border
            v-for="(item, index) in form2"
            :key="index"
          >
            <el-descriptions-item label="等级">
              <el-form-item
                prop="GradeName"
                :rules="{ required: true, message: '请输入等级', trigger: 'blur' }"
              >
                <el-input
                  style="width: 100%"
                  v-model.trim="item.GradeName"
                  placeholder="请输等级"
                ></el-input>
                <el-button
                  style="position: absolute; top: 0; right: 0"
                  :id="index"
                  type="danger"
                  size="small"
                  @click="delet_form21(index)"
                  >删除</el-button
                >
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="等级图片">
              <el-form-item
                prop="gradeImage"
                :rules="{ required: true, message: '请上传等级图片', trigger: 'change' }"
              >
                <el-upload
                  :id="index"
                  :limit="1"
                  :file-list="showFileList(index)"
                  :class="['upload_file', {'none': showFileList(index)?.length }]"
                  multiple
                  list-type="picture-card"
                  :before-upload="(file) => dhandleBeforeUpload(file, index)"
                  :on-change="dhandleChange"
                  :on-remove="(file) => dhandleRemove(file, index)"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
          <div style="height: 90px"></div>
          <el-form-item class="form-operation">
            <el-button @click="window.history.back()">返回</el-button>
            <el-button
              type="primary"
              :loading="loading"
              @click="submitForm('contract')"
              >提交</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <script
      type="text/javascript"
      src="../../../../utils/wangeditor.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../../utils/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../../utils/jquery.cookie.js"
    ></script>
    <script type="text/javascript" src="../../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../../utils/vuex.min.js"></script>
    <script
      type="text/javascript"
      src="../../../../component/elementUI/index.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../../component/component.js"
    ></script>
    <script type="text/javascript" src="../../../../config/config.js"></script>
    <script
      type="text/javascript"
      src="../../../../utils/compressor.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../../utils/ID_Validity.js"
    ></script>
    <script type="text/javascript" src="../../../../utils/utils.js"></script>
    <script type="text/javascript" src="../js/add.js"></script>
  </body>
</html>
